<template>

    <el-row :gutter="20">

        <el-col :span="12">
            <el-card>

                <template #header>
                    <span>基本信息</span>
                </template>

                <el-form label-width="120px" label-position="left">
                    <el-form-item label="订单号">
                        {{ order.order_no }}
                    </el-form-item>
                    <el-form-item label="支付方式">
                        <span  style="margin-right:10px">{{ order.payment_method_text }}</span>
                        <el-button type="" v-show="order.is_payed == 0">未支付</el-button>
                        <el-button v-show="order.is_payed == 1">已支付</el-button>
                        <el-button v-show="order.is_payed == 2">已退款</el-button>
                        <el-button type="danger"
                            v-show="order.is_payed == 1 && order.apply_refund == 1">用户请求退款</el-button>
                        <el-button type="primary" v-show="order.is_payed == 1">退款</el-button>
                    </el-form-item>
                    <el-form-item label="快递">
                        <span style="margin-right:10px">{{ order.shipping_method_text }}</span>

                    <!-- <el-button type="primary"
                        v-show="order.shipping_method == 'package' && order.is_payed && !order.package.length"
                        v-on:click="express_show()">确定发货</el-button> -->

                    <el-button type="primary" v-show="order.shipping_method == 'package' && !order.package.length"
                        v-on:click="express_show()">确定发货</el-button>
                    </el-form-item>
                    <el-form-item label="订单状态">
                        {{ order.status_text }}
                    </el-form-item>
                    <el-form-item label="创建时间">
                        {{ order.create_time }}
                    </el-form-item>
                </el-form>
            </el-card>
            
        </el-col>
        <el-col :span="12">

            <el-card>

                <template #header>
                    <span>客户明细</span>
                </template>

                <el-form label-width="120px" label-position="left">
                    <el-form-item label="用户昵称">
                        {{ order.customer_name }}
                    </el-form-item>
                    <el-form-item label="电话">
                        {{ order.telephone }}
                    </el-form-item>
                    <el-form-item label="用户分组">
                        {{ order.customer_group_name }}
                    </el-form-item>
                </el-form>
            </el-card>

        </el-col>
    </el-row>

    <div style="height:20px"> </div>
    <el-row>

        <el-col>

            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>收货人信息</span>
                    </div>
                </template>
                <el-form>
                    <el-form-item label="收货人姓名">
                        {{ order.address_name }}
                    </el-form-item>
                    <el-form-item label="收货人电话">
                        {{ order.address_phone }}
                    </el-form-item>
                    <el-form-item label="收货人地址">
                        {{ order.address_province }}，
                        {{ order.address_city }}，
                        {{ order.address_area }}，
                        {{ order.address_detail }}
                    </el-form-item>
                </el-form>

            </el-card>

        </el-col>
    </el-row>
    <div style="height:20px"></div>
    <el-row>
        <el-col>
            <el-card>

                <template #header>
                    <span>商品信息</span>
                </template>
                <TmpProduct />
            </el-card>

        </el-col>
    </el-row>

    <div style="height:20px"></div>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>订单总计</span>
            </div>
        </template>
        <div v-for="item in order.total ">
            <el-form label-width="80px" label-position="left">
                <el-form-item :label="item.code_text">

                    ￥{{ item.value }}
                </el-form-item>
            </el-form>

        </div>
    </el-card>
    <div style="height:20px"></div>
    <el-row>
        <el-col>

            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>修改订单状态</span>
                    </div>
                </template>
                <el-form label-width="120px" label-position="left">

                    <el-form-item label="状态">

                        <el-select v-model="change_info.order_status" class="m-2" placeholder="选择" size="large">
                            <el-option v-for="item in order_status_list" :key="item.code" :label="item.name"
                                :value="item.code" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="订单附言">

                        <el-input type="textarea" v-model="change_info.comment"></el-input>
                    </el-form-item>

                    <el-form-item label="">
                        <el-button type="primary" @click="add_history">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

        </el-col>
    </el-row>

    <el-dialog v-model="express.show" title="订单发货" width="45%" :before-close="handleExpressClose">
        <el-form label-width="100px">
            <el-form-item label="收 货 人">

            </el-form-item>

            <el-form-item label="快递公司">
                <el-select v-model="express_code">

                    <el-option v-for="item in express_list" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
            </el-form-item>

            <el-form-item label="快递单号">
                <el-input v-model="package_no"></el-input>

            </el-form-item>

            <el-form-item label="">
                <el-button type="primary" @click="do_express">确认发货</el-button>
                <!-- <el-button>取消</el-button> -->
            </el-form-item>

        </el-form>
    </el-dialog>

</template>

<script lang="ts" setup>

import { inject, ref, provide } from 'vue';
import axios from 'axios';
import TmpProduct from './Product.vue';
import { ElMessage } from 'element-plus';

const VITE_URL = window.VITE_URL;
const order:any = inject('order')

const change_info:any = ref<object>({

    // order_id: order.value.id,
    order_id: 0,
    order_status: '',
    // order_status: order.value.order_status,
    comment: '',

});
const order_status_list:any = ref<Array<object>>([]);

const express:any = ref<object>({
    show: 0,
});
const express_list:any = ref<Array<object>>([])
provide('express_list', express_list)
const get_order_status = () => {

    const url: string = VITE_URL + '/admin.order/status_list';
    axios.get(url).then(res => {

        order_status_list.value = res.data

    })

}

get_order_status();

const add_history = () => {

    const url: string = VITE_URL + '/admin.order/add_history';

    const data = {
        order_id: order.value.id,
        order_status: change_info.value.order_status,
        comment: change_info.value.comment,
    }
    axios.post(url, data).then(res => {

        ElMessage({
            'message': res.data.status == 0 ? '修改成功' : res.data.message,
            duration: 1000,
            type: res.data.status == 0 ? 'success' : 'error',
        })
    })


}

const express_show = () => {

    express.value.show = 1;

}

const handleExpressClose = () => {
    express.value.show = 0;
}

const get_express_list = () => {

    const url: string = VITE_URL + '/admin.express/index';

    axios.get(url).then(res => {
        express_list.value = res.data;

    });

}

get_express_list();


const package_no = ref<string>('');
const express_code = ref<string>('');
const do_express = () => {

    const url: string = VITE_URL + '/admin.order/set_order_package';

    const data = {
        order_id: order.value.id,
        package_no: package_no.value,
        express_code: express_code.value,
    };
    axios.post(url, data).then(res => {

        ElMessage({
            'message': res.data.status == 0 ? '修改成功' : res.data.message,
            duration: 1000,
            type: res.data.status == 0 ? 'success' : 'error',
            'on-close': function () {

                express.value.show = 0;
            }
        })
        express.show = 0;
    })
}

</script>